<script setup>
import DetailPanel from '@/components/detail-panel/detail-panel.vue'

import { storeToRefs } from 'pinia'
import useDetailStore from '@/stores/modules/detail'

const detailStore = useDetailStore()
const { getHouseFacility } = storeToRefs(detailStore)
</script>

<template>
  <div class="detail-facility">
    <DetailPanel title="房屋设施" more="查看全部设施">
      <div class="facility">
        <template v-for="(item, index) in getHouseFacility?.houseFacilitys" :key="index">
          <div class="item" v-if="getHouseFacility.facilitySort?.includes(index)">
            <div class="head">
              <img :src="item.icon" alt="" />
              <div class="text">{{ item.groupName }}</div>
            </div>
            <div class="list">
              <template v-for="(iten, indey) in item.facilitys.slice(0, 4)" :key="indey">
                <div class="iten">
                  <van-icon name="passed" />
                  <span>{{ iten.name }}</span>
                </div>
              </template>
            </div>
          </div>
        </template>
      </div>
    </DetailPanel>
  </div>
</template>

<style lang="less" scoped>
.detail-facility {
  .facility {
    padding: 5px 0;
    border-radius: 6px;
    font-size: 12px;
    background-color: #f7f9fb;
  }
  .item {
    display: flex;
    margin: 25px 0;
  }
  .head {
    width: 90px;
    text-align: center;
    img {
      width: 20px;
      height: 20px;
    }
  }
  .list {
    flex: 1;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }
  .iten {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    width: 50%;
    margin: 4px 0;
  }
  .van-icon {
    margin: 0 6px;
    color: rgb(23, 210, 188);
  }
}
</style>
